<template>
    <div id="app">
        <div>
            <div style="margin: 10px 0">
                <!--搜索栏-->
                <el-form :inline="true" :model="NoticeSearchForm" class="demo-form-inline">
                    <el-form-item label="名称">
                        <el-input v-model="NoticeSearchForm.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-date-picker
                            v-model="NoticeSearchForm.date"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    >
                    </el-date-picker>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="warning" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
            <el-table :header-cell-style="{textAlign: 'center'}" :data="tableData" border stripe :header-cell-class-name="'headerBg'">
                <el-table-column align="center" prop="id" label="编号" width="80"></el-table-column>
                <el-table-column align="center" prop="title" label="标题"></el-table-column>
                <el-table-column align="center" prop="content" label="内容">
                    <template v-slot="scope">
                        <el-button type="primary" @click="view(scope.row.content)">查看内容</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="time" label="发布时间"></el-table-column>
                <el-table-column align="center" prop="author" label="发布人"></el-table-column>
                <el-table-column align="center" prop="click" label="点击量"></el-table-column>
                <el-table-column  align="center" prop="uppid" label="置顶">
                    <template slot-scope="scope">
                        <el-tag type="success" effect="dark" v-if="scope.row.uppid=='0'">未置顶</el-tag>
                        <el-tag type="danger" effect="dark" v-if="scope.row.uppid=='1'">置顶</el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="内容" :visible.sync="dialogFormVisible1" width="60%" :close-on-click-modal="false">
                <el-card>
                    <pre style="line-height: 28px; word-wrap: break-word;white-space: pre-wrap;"><div v-html="content"></div></pre>

                </el-card>
            </el-dialog>


            <div style="padding: 10px 0">
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </div>


    </div>

</template>

<script>
    export default {
        name: "checkList",
        data(){
            return{
                tableData: [],
                total: 0,
                currentPage: 1,
                pageSize: 5,
                title: "",
                date:[],
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2:false,
                content:"",
                value: '',
                editForm:{},
                addForm:{},
                NoticeSearchForm:{}
            }
        },
        created(){
            this.currentPage=1;
            this.initTable();
        },
        methods: {
            reset() {
                this.NoticeSearchForm={}
                this.initTable();
            },

            //分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val
                this.initTable();
            },
            //搜索查询
            onSubmit(){
                this.currentPage=1;
                this.initTable();
            },

            view(content) {
                console.log(content)
                this.content = content;
                this.dialogFormVisible1 = true;
            },
            initTable(){
                this.$http.post("/notice/noticeList?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.NoticeSearchForm).then(resp=>{
                    console.log(resp);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
            },
        }
    }
</script>

<style scoped>
    .headerBg {
        background: #eee!important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>